<template>
  <div class="personInfo_con">
    <div class="arer0">
      <span class="name">{{user.name}}</span>
      <span class="stunum">{{user.code}}</span>
      <span class="class">{{user.clazz.grade.name + user.clazz.name}}</span>
      <span class="phone">{{user.phone}}</span>

      <img :class="[{active: focs[2][0]},'arer2_0']" src="@/assets/images/personal/info/revise.jpg" alt="">

      <img :class="[{active: focs[0][0]},'arer0_0']" src="@/assets/images/personal/info/change_account.jpg" alt="">
      <img :class="[{active: focs[0][1]},'arer0_1']" src="@/assets/images/personal/info/logout.jpg" alt="">
    </div>

    <div :class="[{active_big: focs[0][2]}, 'arer0_2']">
      <img :class="[{active_border: focs[0][2]},'bg']" src="@/assets/images/personal/info/work.jpg" alt="">
      <img v-if="!user.readZuoye" class="bubble" src="@/assets/images/personal/info/bubble.png" alt="">
      <span v-if="!user.readZuoye" class="bubble_value">...</span>
    </div>
    <div :class="[{active_big: focs[0][3]},'arer0_3']">
      <img :class="[{active_border: focs[0][3]},'bg']" src="@/assets/images/personal/info/notice.jpg" alt="">
      <img v-if="!user.readNotice" class="bubble" src="@/assets/images/personal/info/bubble.png" alt="">
      <span v-if="!user.readNotice" class="bubble_value">...</span>
    </div>

    <div :class="[{active: focs[1][0]},'arer1_0']">
      <img class="workdt" src="@/assets/images/personal/info/work_bg.png" alt="">
      <div class="zhou_container">
        <span class="zhou">MON</span>
        <span class="zhou">TUE</span>
        <span class="zhou">WED</span>
        <span class="zhou">THU</span>
        <span class="zhou">FRI</span>
      </div>
      <img style="position: absolute;left: 16px;top: 117px;" v-if="!schedule[0].length"
           src="@/assets/images/personal/personInfo-no1.jpg" alt="">
      <ul :class="'ul'+index1" v-for="(item1, index1) in schedule" :key="index1">
        <li :class="{ultemp: item2.isTemp}" v-for="(item2, index2) in item1" :key="item2.id">{{item2.courseName}}</li>
      </ul>
    </div>

    <div :class="[{active: focs[1][1]},'arer1_1']">
      <img class="workdt" src="@/assets/images/personal/info/grade_bg.png" alt="">
      <img style="position: absolute;left: 16px;top: 16px;" v-if="!score.item.length"
           src="@/assets/images/personal/personInfo-no2.png" alt="">


      <span class="title">{{score.totalObj.testName}}</span>
      <img class="btn" v-if="score.item.length" src="@/assets/images/personal/info/grade_fx.jpg" alt="">

      <div class="zf" v-if="score.item.length">
        <div class="num">{{score.totalObj.courseScore}}</div>
        <div class="title">总分</div>
      </div>
      <div class="njpm" v-if="score.item.length">
        <div class="num">{{score.totalObj.rank}}</div>
        <div class="title">年级排名</div>
      </div>

      <div :class="'course'+ index" v-for="(item,index) in score.item">
        <img :src="getBalloonUrl(index,item.courseScore)" class="course_bg" alt="">
        <span class="courseScore">{{item.courseScore}}</span>
        <span class="courseName">{{item.courseName}}</span>
      </div>

    </div>

    <VMsg :msgValue="msg"></VMsg>
  </div>
</template>

<script>
  import mixinCommon from "@/assets/js/mixin-common"

  export default {
    name: "personInfo",
    mixins: [mixinCommon],
    watch: {
      'user': {
        deep: true,
        handler(n, o) {
          // 获取课程表
          this.getworks()
          // 获取最后次考试
          this.getLastScore()
        }
      }
    },
    data() {
      return {
        msg: {},
        focs: [
          [false, false, false, false],
          [false, false],
          [false]
        ],
        schedule: [[], [], [], [], []],
        score: {
          item: [],
          totalObj: {
            rank: 0,
            courseScore: 0,
            testName: ''
          }
        },
        balloonUrls: [
          [
            require("../../assets/images/personal/info/0-10.png"),
            require("../../assets/images/personal/info/0-30.png"),
            require("../../assets/images/personal/info/0-50.png"),
            require("../../assets/images/personal/info/0-70.png"),
            require("../../assets/images/personal/info/0-90.png"),
            require("../../assets/images/personal/info/0-100.png")
          ],
          [
            require("../../assets/images/personal/info/1-10.png"),
            require("../../assets/images/personal/info/1-30.png"),
            require("../../assets/images/personal/info/1-50.png"),
            require("../../assets/images/personal/info/1-70.png"),
            require("../../assets/images/personal/info/1-90.png"),
            require("../../assets/images/personal/info/1-100.png")
          ],
          [
            require("../../assets/images/personal/info/2-10.png"),
            require("../../assets/images/personal/info/2-30.png"),
            require("../../assets/images/personal/info/2-50.png"),
            require("../../assets/images/personal/info/2-70.png"),
            require("../../assets/images/personal/info/2-90.png"),
            require("../../assets/images/personal/info/2-100.png")
          ],
          [
            require("../../assets/images/personal/info/3-10.png"),
            require("../../assets/images/personal/info/3-30.png"),
            require("../../assets/images/personal/info/3-50.png"),
            require("../../assets/images/personal/info/3-70.png"),
            require("../../assets/images/personal/info/3-90.png"),
            require("../../assets/images/personal/info/3-100.png")
          ],
          [
            require("../../assets/images/personal/info/4-10.png"),
            require("../../assets/images/personal/info/4-30.png"),
            require("../../assets/images/personal/info/4-50.png"),
            require("../../assets/images/personal/info/4-70.png"),
            require("../../assets/images/personal/info/4-90.png"),
            require("../../assets/images/personal/info/4-100.png")
          ],
          [
            require("../../assets/images/personal/info/5-10.png"),
            require("../../assets/images/personal/info/5-30.png"),
            require("../../assets/images/personal/info/5-50.png"),
            require("../../assets/images/personal/info/5-70.png"),
            require("../../assets/images/personal/info/5-90.png"),
            require("../../assets/images/personal/info/5-100.png")
          ]
        ]
      }
    },
    methods: {
      logoutUser() {
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/student/logout?stbid=" +
          this.bridge.stbid +
          "&username=" +
          this.user.username +
          "&password=" +
          this.user.password,
          data => {
            data = JSON.parse(data)
            //console.log(data);
            if (data.head.code !== 1) {
              this.msg = {msg: data.head.desc}
              return;
            }
            this.msg = {msg: this.user.name + "退出成功."}

            setTimeout(() => {
              this.$store.commit("setUser", {})
              this.$emit('onreload')
            }, 1800)
          },
          0,
          function (msg) {
          },
          3000
        );
      },
      closeSwitchAccount() {
        this.$parent.showSwitchAccount = false
        setTimeout(() => {
          this.hs.initFocus('0-0')
        }, 10)
      },
      getworks() {  // 获取一周课程
        // 初始化
        this.schedule = [[], [], [], [], []]
        this.hs.ajax.get(
          "http://" + this.$store.state.domain + "/SMSCH-STB/schedule/all" +
          "?schoolId=" + this.user.clazz.grade.school.id +
          "&gradeId=" + this.user.clazz.grade.id +
          "&clazzId=" + this.user.clazz.id,
          data => {
            data = JSON.parse(data);
            console.log(data);
            if (data.head.code === 1) {
              data.body.forEach((item, index) => {
                if (item.dow === 1) this.schedule[0].push(item)
                if (item.dow === 2) this.schedule[1].push(item)
                if (item.dow === 3) this.schedule[2].push(item)
                if (item.dow === 4) this.schedule[3].push(item)
                if (item.dow === 5) this.schedule[4].push(item)
              })
            }
          }, 0, function (msg) {
          }, 3000
        );
      },
      getLastScore() {  // 成绩分析
        this.hs.ajax.get(
          "http://" + this.$store.state.domain + "/SMSCH-STB/score/last" +
          "?username=" + this.user.username,
          data => {
            data = JSON.parse(data);
            console.log(data);
            if (data.head.code === 1) {
              data.body.forEach((item, index) => {
                if (item.courseName != '总分') {
                  this.score.item.push(item)
                } else {
                  this.score.totalObj = item
                }
              })
              this.score.item = this.score.item.splice(0, 6)
            } else {
              this.score = {
                item: [],
                totalObj: {
                  rank: 0,
                  courseScore: 0,
                  testName: ''
                }
              }
            }
          }, 0, function (msg) {
          }, 3000
        );
      },
      getBalloonUrl(index, courseScore) {   // 获取球球颜色
        if (courseScore <= 25) {
          return this.balloonUrls[index][0]
        } else if (courseScore <= 50) {
          return this.balloonUrls[index][1]
        } else if (courseScore <= 75) {
          return this.balloonUrls[index][2]
        } else if (courseScore <= 100) {
          return this.balloonUrls[index][3]
        } else if (courseScore <= 125) {
          return this.balloonUrls[index][4]
        } else {
          return this.balloonUrls[index][5]
        }
      }
    },
    created() {
      // 获取课程表
      this.getworks()
      // 获取最后次考试
      this.getLastScore()

      new fObject(2, 0, null, '100-5', '1-1', null, '0-0')

      new fObject(0, 0, null, '100-5', '0-1', '2-0', '0-2')
      new fObject(0, 1, null, '0-0', '1-1', '2-0', '0-2')

      new fObject(0, 2, null, '100-5', '1-1', '0-0', '0-3')
      new fObject(0, 3, null, '100-5', '1-1', '0-2', null)

      new fObject(1, 0, null, '0-1', null, null, '1-1')
      new fObject(1, 1, null, '0-2', null, '1-0', null)

      this.hs.fObjCommit()

      this.hs.addFocus([0, 1, 2], (group, objid, objindex) => {
        console.log(group + '-' + objindex)
        this.$set(this.focs[group], objindex, true)
      });
      this.hs.addBlur([0, 1, 2], (group, objid, objindex) => {
        this.$set(this.focs[group], objindex, false)
      });

      // 处理所有点击逻辑
      this.hs.addSelect([0, 1, 2], (group, objid, objindex) => {
        if (group === 0) {
          if (objindex === 0) {
            // console.log(this.$parent);
            this.$parent.showSwitchAccount = true
          } else if (objindex === 1) {
            this.logoutUser()
          } else {
            this.setBackObj({backFocArr: [this.hs.focObj.objid]});
            //埋点
            this.wasuLog('/noticeWork', '作业通知')

            this.$router.push({
              path: '/noticeWork',
              query: {
                index: objindex - 2
              }
            })
          }
        } else if (group === 1) {
          if (objindex === 1) {
            // 无数据时候不能进入
            if (!this.score.item.length) return

            this.setBackObj({backFocArr: [this.hs.focObj.objid]});
            //埋点
            this.wasuLog('/scorAnalysis', '成绩分析')
            this.$router.push({
              path: '/scorAnalysis'
            })
          }
        } else if (group === 2) {
          // 弹出修改手机号码页面
          this.$parent.showModifyPhone = true
        }
      });
    },
    mounted() {
      //  查看是否有记忆焦点
      if (this.hs.cookie.get(this.backObjName)) {
        let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
        let focArr = backObj.backFocArr;
        this.hs.cookie.delOne(this.backObjName);
        //console.log(JSON.stringify(focArr));
        setTimeout(() => {
          this.hs.initFocus(focArr[0]);
        }, 10)
      }
    }
  }
</script>

<style scoped lang="less">
  .personInfo_con {
    width: 1920px;
    height: 1080px;

    .arer0 {
      position: relative;
      left: 120px;
      top: 235px;
      width: 1114px;
      height: 205px;
      background: url("../../assets/images/personal/info/bg_info.png");
      .arer2_0 {
        position: absolute;
        left: 706px;
        top: 113px;
        width: 90px;
        height: 50px;
      }
      .name {
        position: absolute;
        left: 179px;
        top: 51px;
        width: 180px;
        height: 34px;
        font-size: 34px;
        line-height: 34px;
        color: #e8e8e8;
      }

      .stunum {
        position: absolute;
        left: 454px;
        top: 51px;
        width: 180px;
        height: 34px;
        font-size: 34px;
        line-height: 34px;
        color: #e8e8e8;
      }

      .class {
        position: absolute;
        left: 179px;
        top: 122px;
        width: 180px;
        height: 34px;
        font-size: 34px;
        line-height: 34px;
        color: #e8e8e8;
      }

      .phone {
        position: absolute;
        left: 454px;
        top: 122px;
        width: 180px;
        height: 34px;
        font-size: 34px;
        line-height: 34px;
        color: #e8e8e8;
      }

      .arer0_0 {
        position: absolute;
        left: 864px;
        top: 30px;
      }

      .arer0_1 {
        position: absolute;
        left: 864px;
        top: 119px;
      }
    }

    .arer0_2, .arer0_3 {
      position: absolute;
      left: 1282px;
      top: 211px;
      width: 235px;
      height: 229px;

      .bg {
        position: absolute;
        left: 0px;
        top: 24px;
      }

      .bubble {
        position: absolute;
        left: 186px;
        top: 0px;
      }

      .bubble_value {
        position: absolute;
        left: 186px;
        top: 0px;
        width: 49px;
        height: 48px;
        line-height: 48px;
        color: #feffff;
        font-size: 30px;
        text-align: center;
      }
    }

    .arer0_3 {
      left: 1565px;
    }

    .arer1_0 {
      position: absolute;
      left: 120px;
      top: 488px;
      width: 820px;
      height: 539px;
      .zhou_container {
        position: absolute;
        left: 65px;
        top: 80px;
        display: table;
        word-spacing: -1em; /*兼容其他浏览器，题主还未验证*/
        .zhou {
          display: inline-block;
          width: 147px;
          height: 28px;
          line-height: 28px;
          font-size: 28px;
          color: #00b8ff;
          text-align: center;
        }
      }
      .workdt {

      }

      ul {
        width: 147px;
      }

      ul li {
        list-style: none;
        display: block;
        width: 147px;
        height: 44px;
        line-height: 43px;
        font-size: 30px;
        text-align: center;
        overflow: hidden;
      }

      ul li:nth-child(6) {
        margin-top: 8px;
      }

      .ul0 {
        position: absolute;
        left: 65px;
        top: 117px;
      }

      .ul1 {
        position: absolute;
        left: 212px;
        top: 117px;
      }

      .ul2 {
        position: absolute;
        left: 359px;
        top: 117px;
      }

      .ul3 {
        position: absolute;
        left: 506px;
        top: 117px;
      }

      .ul4 {
        position: absolute;
        left: 653px;
        top: 117px;
      }

      .ultemp {
        background: url("../../assets/images/personal/info/workdt_ls.jpg") no-repeat;
      }
    }

    .arer1_1 {
      position: absolute;
      left: 984px;
      top: 488px;
      width: 820px;
      height: 539px;

      .title {
        position: absolute;
        left: 49px;
        top: 45px;
        width: 500px;
        height: 34px;
        font-size: 28px;
        line-height: 34px;
        color: #53cfff;
        overflow: hidden;
      }

      .btn {
        position: absolute;
        left: 582px;
        top: 32px;
      }

      .zf, .njpm {
        position: absolute;
        left: 225px;
        top: 147px;
        width: 139px;
        height: 128px;
        line-height: 64px;
        font-size: 64px;
        text-align: center;

        .num {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 139px;
          height: 64px;
          color: #a83a3a;
        }

        .title {
          position: absolute;
          left: 0px;
          top: 64px;
          width: 139px;
          height: 64px;
          color: #094a69;
        }
      }

      .njpm {
        left: 461px;
      }

      .course {
        width: 106px;
        height: 160px;

        .courseScore {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 106px;
          height: 89px;
          line-height: 89px;
          font-size: 34px;
          text-align: center;
        }

        .courseName {
          position: absolute;
          left: 0px;
          top: 105px;
          width: 106px;
          height: 55px;
          line-height: 55px;
          font-size: 34px;
          text-align: center;
          color: #e8e8e8;
        }
      }

      .course0 {
        position: absolute;
        left: 34px;
        top: 337px;
        .course;
      }

      .course1 {
        position: absolute;
        left: 175px;
        top: 337px;
        .course;
      }

      .course2 {
        position: absolute;
        left: 301px;
        top: 337px;
        .course;
      }

      .course3 {
        position: absolute;
        left: 427px;
        top: 337px;
        .course;
      }

      .course4 {
        position: absolute;
        left: 553px;
        top: 337px;
        .course;
      }

      .course5 {
        position: absolute;
        left: 679px;
        top: 337px;
        .course;
      }
    }

    .active {
      border: 2px solid #ffffff;
      border-radius: 8px;
      transform: scale(1.1);
      -webkit-transform: scale(1.1);
    }

    .active_big {
      transform: scale(1.1);
      -webkit-transform: scale(1.1);
    }

    .active_border {
      border: 2px solid #ffffff;
      border-radius: 8px;
    }
  }
</style>
